<template>
  <ExamMain @change="changeCategory">
    <div class="point-container">
      <!-- <div class="point-filtrate" v-if="filtrateList.length > 0">
        <div class="item" v-for="(item, index) in filtrateList" :key="index">
          <span>{{ item.title }}</span>
          <i class="el-icon-close" @click="removePoint(index)"></i>
        </div>
      </div> -->
      <div class="point-body">
        <div class="point-item" v-for="(item, index) in pointList" :key="index">
          <el-row type="flex" align="middle" justify="space-between" class="point-item__top">
            <span class="title">{{ item.title }}</span>
            <span class="select" @click="selectItem(item)">{{
              item.chooseAll ? '取消全选' : '全选'
            }}</span>
          </el-row>
          <el-row type="flex" :gutter="14" class="item-row">
            <div class="item-col" v-for="(subItem, index) in item.child" :key="index">
              <div
                class="title"
                :class="{ active: addClassActive(subItem.id) }"
                @click="addPoint(subItem, item)"
              >
                {{ subItem.title }}
              </div>
            </div>
          </el-row>
        </div>
      </div>
      <edu-no-data
        v-if="!loading && pointList.length == 0"
        marginTop="80px"
        marginBottom="60px"
      ></edu-no-data>
      <div class="point-sliber" v-if="!loading && pointList.length > 0">
        <div class="title">出题数量</div>
        <el-slider
          v-model="topicValue"
          :marks="topicMarks"
          :min="10"
          :max="50"
          :step="10"
          :show-tooltip="false"
        ></el-slider>
      </div>
      <el-row
        type="flex"
        justify="center"
        class="point-footer"
        v-if="!loading && pointList.length > 0"
      >
        <el-button plain round @click="emptyPoint">清空筛选</el-button>
        <el-button type="primary" round @click="startWork">开始答题</el-button>
      </el-row>
    </div>
  </ExamMain>
</template>

<script>
import EduNoData from '@/components/EduNoData'
import ExamMain from '../components/examMain'
export default {
  components: {
    EduNoData,
    ExamMain
  },
  data() {
    return {
      pointList: [],
      filtrateList: [],
      moduleId: 0,
      category: 0,
      topicValue: 20,
      topicMarks: {
        10: '10',
        20: '20',
        30: '30',
        40: '40',
        50: '50'
      },
      loading: true
    }
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.moduleId = n.query.id
        this.category = n.query.category
        this.getPointData()
      }
    }
  },
  created() {
    // this.getPointData()
  },
  methods: {
    getPointData() {
      let _this = this
      // if (!this.moduleId || !this.category) return
      _this.$api.getExamPointCategory(
        {
          module_id: this.moduleId,
          category: this.category
        },
        res => {
          _this.pointList = res.data.point_tree
          _this.pointList.forEach(item => {
            item.chooseAll = false
          })
          setTimeout(() => {
            this.loading = false
          }, 200)
        }
      )
    },
    changeCategory(data) {
      this.category = data.cid
      this.moduleId = data.mid
      this.getPointData()
    },
    // 添加知识点
    addPoint(item, parent) {
      let data = this.filtrateList.filter(res => res.id == item.id)
      if (this.$util.isEmpty(data)) {
        this.filtrateList.push(item)
      } else {
        let index = this.filtrateList.findIndex(value => value.id == item.id)
        this.filtrateList.splice(index, 1)
      }
      let chooseId = this.filtrateList.map(item => item.id)
      parent.chooseAll = parent.child.every(item => chooseId.includes(item.id))
    },
    // 清空知识点
    emptyPoint() {
      this.filtrateList = []
      this.pointList.forEach(item => {
        item.chooseAll = false
      })
    },
    // 删除知识点
    /* removePoint(index) {
      this.filtrateList.splice(index, 1)
    }, */
    // 知识点选中状态
    addClassActive(id) {
      let arrIds = this.filtrateList.map(item => item.id)
      return arrIds.includes(id)
    },
    // 全选
    selectItem(item) {
      const { chooseAll, child } = item
      let list = this.filtrateList
      if (chooseAll) {
        let chooseId = child.map(item => item.id)
        this.filtrateList = list.filter(item => !chooseId.includes(item.id))
        item.chooseAll = false
      } else {
        list = list.concat(child)
        this.filtrateList = list.reduce(
          (pre, item) => (pre.includes(item) ? pre : [...pre, item]),
          []
        )
        item.chooseAll = true
      }
    },
    // 开始答题
    startWork() {
      this.$globalToLogin(() => {
        if (this.$util.isEmpty(this.filtrateList)) {
          this.$message.error(`请选择知识点`)
          return
        }
        // 获取选择的id数组，转成字符串
        let ids = this.filtrateList.map(item => item.id).toString()
        this.$router.push({
          path: '/exam/point/topic',
          query: {
            id: this.moduleId,
            ids: ids,
            num: this.topicValue
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.point-container {
  background-color: #ffffff;
  padding: 20px 0;
  margin-top: 10px;
  .point-filtrate {
    margin-top: 5px;
    padding: 0 30px;
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 4px 6px 4px 8px;
      background: #f4f8ff;
      border-radius: 12px;
      margin-right: 17px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      span {
        font-size: 13px;
        font-weight: 400;
        @include edu-color-auxiliary;
        margin-right: 2px;
        line-height: 1;
      }
      .el-icon-close {
        cursor: pointer;
        @include edu-color-auxiliary;
        opacity: 0.6;
      }
    }
  }
  .point-body {
    padding: 0 30px;
    .point-item {
      margin-top: 30px;
      .point-item__top {
        .title {
          color: $text-color-import;
          font-size: 14px;
          display: flex;
          align-items: center;
          &::before {
            content: '';
            width: 6px;
            height: 6px;
            display: block;
            border-radius: 3px;
            margin-right: 5px;
            @include edu-color-primary(background-color);
          }
        }
        .select {
          font-size: 13px;
          font-weight: 400;
          color: $text-color-secondary;
          cursor: pointer;
          &:hover {
            @include edu-color-auxiliary;
          }
        }
      }
      .item-row {
        flex-wrap: wrap;
        padding-left: 4px;
        .item-col {
          margin-top: 16px;
          padding-left: 10px;
          padding-right: 10px;
        }
        .title {
          font-size: 13px;
          font-weight: 400;
          color: $text-color-secondary;
          line-height: 1;
          padding: 7px 13px;
          cursor: pointer;
          border-radius: 15px;
          border: 1px solid $border-color-wireframe;
          &.active {
            color: #ffffff;
            @include edu-color-primary(border-color);
            @include edu-color-primary(background-color);
          }
        }
      }
    }
  }
  .point-sliber {
    margin-top: 40px;
    padding: 0 30px;
    .title {
      margin-bottom: 15px;
      color: $text-color-import;
      font-size: 14px;
      font-weight: 500;
    }
    ::v-deep .el-slider {
      .el-slider__bar {
        display: none;
      }
      .el-slider__runway {
        height: 2px;
      }
      .el-slider__stop {
        top: -4px;
        width: 10px;
        height: 10px;
        background-color: #e4e7ed;
      }
      .el-slider__button-wrapper {
        top: -17px;
      }
    }
  }
  .point-footer {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #e4e7ed;
  }
}
</style>
